<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Bootstrap 实例 - 边框表格</title>
    <link
      rel="stylesheet"
      href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
    />
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
      #modifyModal {
        display: none;
        background-color: rgba(0, 0, 0, 0.5);
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }

      .modify-modal-box {
        width: 100%;
        height: 100%;
        /* 预防被盖住 */
        z-index: 100;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      #modifyModalContent {
        padding: 20px;
        background-color: #fff;
      }

      #modifyModal1 {
        display: none;
        background-color: rgba(0, 0, 0, 0.5);
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }

      .modify-modal-box1 {
        width: 100%;
        height: 100%;
        /* 预防被盖住 */
        z-index: 100;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      #modifyModalContent1 {
        padding: 20px;
        background-color: #fff;
      }
    </style>
  </head>
  <body>
    <button id="addBtn" type="button" class="btn btn-default">增加</button>
    <input
      id="searchName"
      type="text"
      class="input input-search"
      placeholder="请输入搜索名称"
    />
    <input
      id="searchCity"
      type="text"
      class="input input-search"
      placeholder="请输入搜索城市"
    />
    <button id="searchBtn" type="button" class="btn btn-default">搜索</button>
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>名称</th>
          <th>城市</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <!-- <tr>
          <td>Tanmay</td>
          <td>Bangalore</td>
          <td>
            <button type="button" class="btn btn-danger">删除</button>
            <button type="button" class="btn btn-info">修改</button>
          </td>
        </tr>
        <tr>
          <td>Sachin</td>
          <td>Mumbai</td>
          <td>
            <button type="button" class="btn btn-danger">删除</button>
            <button type="button" class="btn btn-info">修改</button>
          </td>
        </tr> -->
      </tbody>
    </table>
    <div id="modifyModal">
      <div class="modify-modal-box">
        <div id="modifyModalContent">
          <form>
            <!-- 用户不能修改学号 -->
            <div class="row">
              <label class="col-sm-4">ID：</label
              ><input class="col-sm-7" id="dataId" disabled type="text" />
            </div>
            <div class="row">
              <label class="col-sm-4">姓名：</label
              ><input class="col-sm-7" id="dataName" type="text" />
            </div>
            <div class="row">
              <label class="col-sm-4">城市：</label
              ><input class="col-sm-7" id="dataCity" type="text" />
            </div>
          </form>
          <!-- form 会导致 自动关闭 -->
          <div class="row">
            <button id="confirmBtn" class="col-sm-4">确定修改</button>
            <button id="cancelBtn" class="col-sm-8">取消</button>
          </div>
        </div>
      </div>
    </div>
    <div id="modifyModal1">
      <div class="modify-modal-box1">
        <div id="modifyModalContent1">
          <form>
            <!-- 用户不能修改学号 -->
            <div class="row">
              <label class="col-sm-4">ID：</label
              ><input class="col-sm-7" id="dataId1" disabled type="text" />
            </div>
            <div class="row">
              <label class="col-sm-4">姓名：</label
              ><input class="col-sm-7" id="dataName1" type="text" />
            </div>
            <div class="row">
              <label class="col-sm-4">城市：</label
              ><input class="col-sm-7" id="dataCity1" type="text" />
            </div>
          </form>
          <!-- form 会导致 自动关闭 -->
          <div class="row">
            <button id="confirmBtn1" class="col-sm-4">确定新增</button>
            <button id="cancelBtn1" class="col-sm-8">取消</button>
          </div>
        </div>
      </div>
    </div>
    <script>
      let data = [
        { id: 1, name: "李四", city: "重庆" },
        { id: 2, name: "张三", city: "成都" },
        { id: 3, name: "张三1", city: "成都" },
        { id: 4, name: "张三12", city: "成都" },
        { id: 5, name: "张三123", city: "成都" },
      ];

      let copyData = $.extend(true, [], data);

      // 渲染表格
      function renderTbody(data) {
        $("tbody").empty();
        for (let i = 0; i < data.length; ++i) {
          const item = data[i];
          $("tbody").append(`
          <tr>
            <td>${item.name}</td>
            <td>${item.city}</td>
            <td>
            <button id="delete-btn" data-id="${item.id}" type="button" class="btn btn-danger">删除</button>
            <button id="modify-btn" data-id="${item.id}" type="button" class="btn btn-info">修改</button>
            </td>
          </tr>
          `);
        }
      }

      renderTbody(data);

      // 删除按钮处理
      $("tbody").on("click", "#delete-btn", function (event) {
        const dataId = parseInt($(event.target).attr("data-id"));
        // 修改 data
        // 通过id 找到对应数据 并删除
        for (let i = 0; i < data.length; ++i) {
          if (data[i].id === dataId) {
            data.splice(i, 1);
          }
        }
        renderTbody(data);
      });

      // 修改按钮处理
      $("tbody").on("click", "#modify-btn", function (event) {
        const dataId = parseInt($(event.target).attr("data-id"));
        $("#modifyModal").show();
        const currentData = data.find((item) => {
          return item.id === dataId;
        });
        // console.log(currentData);
        $("#dataId").val(currentData.id);
        $("#dataName").val(currentData.name);
        $("#dataCity").val(currentData.city);
      });

      // 取消修改按钮处理
      $("#cancelBtn").on("click", function () {
        $("#modifyModal").hide();
      });

      // 确认修改按钮处理
      $("#confirmBtn").on("click", function (event) {
        // 获取input值
        const id = parseInt($("#dataId").val());
        const name = $("#dataName").val();
        const city = $("#dataCity").val();

        // 基于input值 修改data
        for (let i = 0; i < data.length; ++i) {
          const item = data[i];
          if (item.id === id) {
            item.id = id;
            item.name = name;
            item.city = city;
          }
        }
        // 重新渲染
        renderTbody(data);
        // 隐藏弹窗
        $("#modifyModal").hide();
      });

      // 新增按钮处理
      $("#addBtn").on("click", function () {
        $("#modifyModal1").show();
        $("#dataId1").empty();
        $("#dataName1").empty();
        $("#dataCity1").empty();
      });

      // 新增确定按钮
      $("#confirmBtn1").on("click", function () {
        const obj = {};
        const id = data.length + 1;
        const name = $("#dataName1").val();
        const city = $("#dataCity1").val();
        obj.id = id;
        obj.name = name;
        obj.city = city;
        data.push(obj);
        console.log(obj);
        // console.log(data);
        renderTbody(data);
        $("#modifyModal1").hide();
      });

      // 新增取消按钮
      $("#cancelBtn1").on("click", function () {
        $("#modifyModal1").hide();
      });

      // 搜索按钮处理
      $("#searchBtn").on("click", function (event) {
        // 获取名称
        const name = $("#searchName").val();
        // 获取城市
        const city = $("#searchCity").val();

        const searchData = [];

        for (let i = 0; i < copyData.length; ++i) {
          const item = copyData[i];
          // 如果为空  都添加
          // 如果name 包含字符串 添加

          // includes 进行模糊搜索
          // data[i].name === name
          const condition =
            (!name || item.name.includes(name)) &&
            (!city || item.city.includes(city));
          if (condition) {
            searchData.push(item);
          }
        }
        data = searchData;
        console.log(searchData);
        // 搜索后  原数据没有发生改变，到时 分页的时候会有问题
        renderTbody(searchData);
      });

    </script>
  </body>
</html>
